<template>
  <div>
    <shop-header>福豆充值</shop-header>
    <div class="shop-user-body" style="text-align: left">
      <mt-field label="金额" align="left" placeholder="请输入充值金额" v-model="money"></mt-field>
      <div style="height: 30px"> </div>
      <mt-radio
          title="选择支付方式"
          align="right"
          v-model="plat"
          :options="options">
      </mt-radio>
      <div style="height: 30px"> </div>
      <mt-button type="danger" size="large" @click="saveAddress">充值</mt-button>
    </div>
  </div>
</template>

<script>
import {Cell} from 'mint-ui';
import Header from '../components/header';
import request from "../utils/request";
import {Indicator} from 'mint-ui';
import util from "../utils/util";

export default {
  components: {
    Cell,
    shopHeader: Header,
  },
  data() {
    return {
      money: '',
      plat: 'wx',
      options: [
        {
          label: '微信',
          value: 'wx'
        },
        {
          label: '支付宝',
          value: 'zfb'
        }
      ]
    }
  },
  async created() {
    setTimeout(()=>{
      let spans = document.getElementsByClassName("mint-radio-label");
      spans[0].innerHTML = "<img alt='微信' style='margin: 10px' width='140px' height='40px' src='http://running.zhongaiyisheng.net/img/wx.png'>";
      spans[1].innerHTML = "<img alt='支付宝' style='margin: 10px' width='140px' height='40px' src='http://running.zhongaiyisheng.net/img/zfb.png'>";
      let rights = document.getElementsByClassName("is-right");
      rights[0].style.marginTop = "18px";
      rights[1].style.marginTop = "18px";
    }, 10);
  },
  methods: {
    saveAddress() {
      if(!/^\d+$/.test(this.money) || this.money <= 0){
        util.toast("清输入正确的充值金额!");
        return;
      }
      Indicator.open();
      let openid = localStorage.getItem("openid");
      request({openid: openid, plat :this.plat, money: parseInt(this.money)}, "/ajax/member/pay").then(res => {
        Indicator.close();
        if(util.warnFunc(res)) return;
        if(res.code == 0){
          let data = res.data;
          if(data.plat == "wx"){
            let router = this.$router;
            WeixinJSBridge.invoke('getBrandWCPayRequest', {
                  "appId": data.appId,
                  "timeStamp": data.timeStamp,
                  "nonceStr": data.nonceStr,
                  "package": data.package,
                  "signType": data.signType,
                  "paySign": data.paySign //微信签名
                },
                function(res) {
                  if (res.err_msg == "get_brand_wcpay_request:ok") {
                    alert("支付成功");
                    router.back();
                  }else if(res.err_msg == "get_brand_wcpay_request:cancel"){
                    alert("取消支付");
                  }
                }
            );
          }else if(data.plat == "zfb"){
            window.location.href = "http://running.zhongaiyisheng.net/ajax/pay?id=" + data.id;
          }
        }
      });
    },
  }
}

</script>

<style scoped>
p {
  margin: 0;
  padding: 0;
}

.shop-user-body {
  width: 95%;
  margin: auto;
}

</style>
